Hello and welcome to this lecture.
In this late show we'll will be clearing the ball at the moment.
The ball is leaving a continuous trail.
So we gonna use a method to clear the ball from the canvas each time.
This is what the javascript looks like at the moment.
So we view what the canvas looks like a good run lunch in Chrome and then you can see what the Cumbers
looks like at the moment you can see it's just got drawn a line continuous stood a gate you can see
that.
So at the moment the ball is not is just continuously painting or drawing on each frame that is drawn
on the cup.
So every time a new frame is spent 10 on the canvas that is every time a new frame of the board is painted
on the canvas.
It doesn't remove the previous ones so it creates a continuous trail.
What are we going to do.
There is a method called clear canvas so we are going to use that method to clear the content of the
cover.
The metal squaw clear wrecked the Campbells is obviously looks like a rectangle.
So the clay erect method will treat it as a rectangle.
All right we are going to insert the clairette method just at the beginning of this drill function here
so it'll clear each instance to allow a new instance to be painted on the compass so we do that we have
a clear wrecked
clairette Meter.
Notice the way the method is written.
Lower case and then the first letter of the other word.
It's in upper case.
You can see the format almost identical with the other methods.
So this clairette method takes in four parameters.
Inside this parenthesis for four Param if there's need to go in that the first is the x and y coordinates
of the top left corner of the rectangle.
So the whole canvas is treated as a rectangle.
So the first parameters are going.
There is the x and y coordinates.
Okay off the top left corner of the rectangle and then we have the x and y coordinates on the bottom
right corner of the rectangle.
So the whole area is covered by the rectangle.
So this lace barometers we're pulling here will clear each instance where the board painted the combat
to allow a new one to be painted on.
So let's do that.
So the value I'm going to give is zero for X and then 0 for the Y and then we'll go to campus.
Divide the weight come back with.
Okay so I'll be canvas Don't wait.
Corner.
And then for the Y to be crowned that's not right.
All right.
There we put a semicolon to that.
I forgot to put the ctm.
You need to put a city so that it can reference the the get.
Contest objects for insert any city accept.
So let's go through the four parameters that this clairette method takes.
So the first two here is the x y coordinates so what we value gives them zero.
This is the x and y coordinates of the top left corner of the rectangle.
So the whole canvas is treated as a rectangle.
So there's two values.
We represent the top left hand corner of the rectangle.
The other two value with the canvas don't we.
And the cover stops height will represent the x and y coordinates of the bottom right corner of the
rectangle.
Okay so in this way the whole area of the rectangle is covered.
So any instance of the ball that is painted or drawn on the canvas is cleared before the next frame
is painted on.
So every instance of the canvas is referred to as a frame.
So each frame was each frame is painted on it will be cleared for the next one to be painted on.
And this will happen every ten milli seconds.
So let me say this and then go back and let her run and go by to my index file and go run and launching
Chrome.
Hopefully you see.
You can see that the cassi a ball or the ball is not stain.
You can see that.
Okay go fix that in the next lecture.
So if he can see the continuous trail as stop he just creates a single ball out so you can see the ball
to be moving or do is leaving the camp.
So we are going to fix that in subsequent elections so rather than leave the canvas.
It will bounce off the walls of the canvas so thank you so much for watching this lecture.
Please let me know if you have any questions.
Take care.
Bye for now.